<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Biscaya Template MultiPurpose</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/icons.css" rel="stylesheet">

<link id="main-color" href="css/skin-orange.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/ico/favicon.png">
</head>
<body class="boxed">

<div class="body">
	<!-- Navigation -->
	<header>
	<div class="container clearfix">
		<div class="row">
			<div class="col-md-12">
				<h1 class="brandlogo"><a href="index.html"><img src="img/logo.png" alt=""></a></h1>
				<div class="topinfo">
					<ul class="social-icons list-soc">
						<li><a href="#"><i class="icon-facebook"></i></a></li>
						<li><a href="#"><i class="icon-twitter"></i></a></li>
						<li><a href="#"><i class="icon-linkedin"></i></a></li>
						<li><a href="#"><i class="icon-google-plus"></i></a></li>
						<li><a href="#"><i class="icon-pinterest"></i></a></li>
					</ul>
					<div class="infophone">
						<i class="icon-phone"></i> Tel: +8 737 924 6035
					</div>
					<div class="infoaddress">
						 3953 Berkley Street, Fort Washington, 19034
					</div>
				</div>
				<div class="clearfix">
				</div>
				<div class="row-nav navbar">
					<div class="navbar-inner">
						<ul id="nav" class="nav">
							<li><a href="index.html">Home</a></li>
							<li class="divider-vertical"></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Templates <b class="caret"></b></a>
							<ul class="dropdown-menu js-activated" style="display: none;">
								<li><a href="about.html">About Us</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="faq.html">Knowledge Base</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								
								<li><a href="404.html">404 Error</a></li>
								<!--.dropdown-->
							</ul>
							</li>
							<li class="divider-vertical"></li>
							<li class="active selected"><a href="elements.html">Elements</a></li>
							<li class="divider-vertical"></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Layouts <b class="caret"></b></a>
							<ul class="dropdown-menu js-activated" style="display: none;">
								<li><a href="columns.html">Columns</a></li>
								<li><a href="masonry4.html">Masonry 4</a></li>
								<li><a href="masonry3.html">Masonry 3</a></li>
								<li><a href="masonry2.html">Masonry 2</a></li>
								<!--.dropdown-->
							</ul>
							</li>
							<li class="divider-vertical"></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
							<ul class="dropdown-menu js-activated" style="display: none;">
								<li><a href="portfolio.html">Portfolio List</a></li>
								<li><a href="projectdetail.html">Project Detail</a></li>
								<!--.dropdown-->
							</ul>
							</li>
							<li class="divider-vertical"></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
							<ul class="dropdown-menu js-activated" style="display: none;">
								<li><a href="bloghome.html">Blog Home</a></li>
								<li><a href="blogsingle.html">Single Post</a></li>
								<!--.dropdown-->
							</ul>
							</li>
							<li class="divider-vertical"></li>
							<li><a href="contact.html">Contact</a></li>
							<li class="divider-vertical"></li>
						</ul>
						<form id="search" action="search.php" method="GET">							
								<input type="text" onfocus="if(this.value =='Search here...' ) this.value=''" onblur="if(this.value=='') this.value='Search here...'" value="Search here..." name="s">
								<a href="#"></a>							
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	</header>
	<div class="text-center">
		<img src="img/sha.png" class="slidershadow" alt="">
	</div>
	<!-- /end header -->
	<div class="container">
		<div class="page-header">
			<h1>Elements</h1>
			<div class="headerdivider">
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Tabs
					</div>
				</div>
				<!-- Tabs
			================================================== -->
				<ul id="myTab" class="nav nav-tabs">
					<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
					<li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
					<li class=""><a href="#something" data-toggle="tab">Something</a></li>
				</ul>
				<div id="myTabContent" class="tab-content">
					<div class="tab-pane fade active in" id="home">
						<p>
							 Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
						</p>
						<p>
							 Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum.
						</p>
					</div>
					<div class="tab-pane fade" id="profile">
						<p>
							 Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
						</p>
						<p>
							 Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum.
						</p>
					</div>
					<div class="tab-pane fade" id="something">
						<p>
							 Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
						</p>
						<p>
							 Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum.
						</p>
					</div>
				</div>
				<!-- END Tabs -->
			</div>
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Accordions
					</div>
				</div>
				<!-- Accordions
			================================================== -->
				<div class="accordion" id="accordion2">
					<div class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
							Collapsible Group Item 1 </a>
						</div>
						<div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
							<div class="accordion-inner">
								 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente.
							</div>
						</div>
					</div>
					<div class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
							Collapsible Group Item 2 </a>
						</div>
						<div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
							<div class="accordion-inner">
								 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente.
							</div>
						</div>
					</div>
					<div class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
							Collapsible Group Item 3 </a>
						</div>
						<div id="collapseThree" class="accordion-body in collapse" style="height: auto;">
							<div class="accordion-inner">
								 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente.
							</div>
						</div>
					</div>
				</div>
				<!-- END accordions -->
			</div>
		</div>
		<div class="break">
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Left Tabs
					</div>
				</div>
				<!-- Left Tabs
			================================================== -->
				<div class="tabbable tabs-left">
					<!--bootstrap tabs implementation-->
					<ul class="nav nav-tabs">
						<!--tabs-->
						<li class="active">
						<a data-toggle="tab" href="#tab1">Tab 1</a>
						</li>
						<li>
						<a data-toggle="tab" href="#tab2">Tab 2</a>
						</li>
						<li>
						<a data-toggle="tab" href="#tab3">Tab 3</a>
						</li>
						<li>
						<a data-toggle="tab" href="#tab4">Tab 4</a>
						</li>
					</ul>
					<!--tabs content -->
					<div class="tab-content">
						<div id="tab1" class="tab-pane active fade in">
							 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
						</div>
						<div id="tab2" class="tab-pane fade ">
							 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
						</div>
						<div id="tab3" class="tab-pane fade ">
							 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
						</div>
						<div id="tab4" class="tab-pane fade ">
							 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
						</div>
					</div>
					<!--tab content -->
				</div>
				<!-- END Left Tabs -->
			</div>
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Blockquotes
					</div>
				</div>
				<!-- Blockquote
			================================================== -->
				<blockquote>
					<p>
						 "That deep emotional conviction of the presence of a superior reasoning power, which is revealed in the incomprehensible universe, forms my idea of God. There are two ways to live: you can live as if nothing is a miracle; you can live as if everything is a miracle."
					</p>
				</blockquote>
				<!-- END Blockquote -->
			</div>
		</div>
		<div class="break">
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Text Styles
					</div>
				</div>
				<!-- Text Styles
			================================================== -->
				<p class="muted">
					 Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
				</p>
				<p class="text-warning">
					 Etiam porta sem malesuada magna mollis euismod.
				</p>
				<p class="text-error">
					 Donec ullamcorper nulla non metus auctor fringilla.
				</p>
				<p class="text-info">
					 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
				</p>
				<p class="text-success">
					 Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
				</p>
				<p style="font-family:open_sanslight">
					 Donec fringilla libero condimentum ligula tempus dapibus
				</p>
				<p style="font-family:open_sansbold">
					 Donec fringilla libero condimentum ligula tempus dapibus
				</p>
				<!-- END Text Styles -->
			</div>
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Alerts
					</div>
				</div>
				<!-- Alerts
			================================================== -->
				<div class="alert alert-warning">
					<button type="button" class="close" data-dismiss="alert">&times;</button>
					<strong>Warning!</strong> Best check yo self, you're not looking too good.
				</div>
				<div class="alert alert-danger">
					<button type="button" class="close" data-dismiss="alert">×</button>
					<strong>Oh snap!</strong> Change a few things up and try submitting again.
				</div>
				<div class="alert alert-success">
					<button type="button" class="close" data-dismiss="alert">×</button>
					<strong>Well done!</strong> You successfully read this important alert message.
				</div>
				<div class="alert alert-info">
					<button type="button" class="close" data-dismiss="alert">×</button>
					<strong>Heads up!</strong> This alert is not super important.
				</div>
				<!-- END Alerts -->
			</div>
		</div>
		<div class="break">
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Progress Bars
					</div>
				</div>
				<!-- Progress Bars
			================================================== -->
				<div class="progress">
				  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
					<span class="sr-only">40% Complete (success)</span>
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
					<span class="sr-only">20% Complete</span>
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
					<span class="sr-only">60% Complete (warning)</span>
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
					<span class="sr-only">80% Complete (danger)</span>
				  </div>
				</div>				
				
				
				<div class="progress">
				  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
					<span class="sr-only">40% Complete (success)</span>
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
					<span class="sr-only">20% Complete</span>
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
					<span class="sr-only">60% Complete (warning)</span>
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
					<span class="sr-only">80% Complete (danger)</span>
				  </div>
				</div>
				<!-- END porgress bars -->
			</div>
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Skills
					</div>
				</div>
				<!-- Skills
			================================================== -->
				<ul id="skill">
					<li><span class="thebar progressdefault" style="width:100%;"></span>
					<h3>HTML5 / CSS3 100%</h3>
					</li>
					<li><span class="thebar progressblue" style="width:80%;"></span>
					<h3>PHP 80%</h3>
					<li><span class="thebar progressorange" style="width:70%;"></span>
					<h3>PHP 70%</h3>
					<li><span class="thebar progressgreen" style="width:50%;"></span>
					<h3>PHP 50%</h3>
				</ul>
				<div class="clearfix">
				</div>
				<!-- END Skills -->
			</div>
		</div>
		<div class="break">
		</div>
		<div class="titleborder">
			<div>
				 Pricing
			</div>
		</div>
		<!-- Pricing
	================================================== -->
		<div class="row">
			<div class="vuzz-pricing-table col-md-3">
				<div class="vuzz-pricing">
					<div class="vuzz-pricing-header">
						<h5>Gold</h5>
						<div class="vuzz-pricing-cost">
							 $29.99
						</div>
						<div class="vuzz-pricing-per">
							 per month
						</div>
					</div>
					<div class="vuzz-pricing-content">
						<ul>
							<li>5 products</li>
							<li>1 image per product</li>
							<li>basic stats</li>
							<li>non commercial</li>
						</ul>
					</div>
					<div class="vuzz-pricing-button">
						<a href="#" class="vuzz-button buttonprice" target="_self" rel="nofollow"><span class="vuzz-button-inner">Order now</span></a>
					</div>
				</div>
			</div>
			<div class="vuzz-pricing-table col-md-3">
				<div class="vuzz-pricing">
					<div class="vuzz-pricing-header">
						<h5>Premium</h5>
						<div class="vuzz-pricing-cost">
							 $29.99
						</div>
						<div class="vuzz-pricing-per">
							 per month
						</div>
					</div>
					<div class="vuzz-pricing-content">
						<ul>
							<li>5 products</li>
							<li>1 image per product</li>
							<li>basic stats</li>
							<li>non commercial</li>
						</ul>
					</div>
					<div class="vuzz-pricing-button">
						<a href="#" class="vuzz-button buttonprice" target="_self" rel="nofollow"><span class="vuzz-button-inner">Order now</span></a>
					</div>
				</div>
			</div>
			<div class="vuzz-pricing-table col-md-3">
				<div class="vuzz-pricing popular">
					<div class="vuzz-pricing-header popular">
						<h5>Featured</h5>
						<div class="vuzz-pricing-cost">
							 $29.99
						</div>
						<div class="vuzz-pricing-per">
							 per month
						</div>
					</div>
					<div class="vuzz-pricing-content">
						<ul>
							<li>5 products</li>
							<li>1 image per product</li>
							<li>basic stats</li>
							<li>non commercial</li>
						</ul>
					</div>
					<div class="vuzz-pricing-button popular">
						<a href="#" class="vuzz-button buttonprice" target="_self" rel="nofollow"><span class="vuzz-button-inner">Order now</span></a>
					</div>
				</div>
			</div>
			<div class="vuzz-pricing-table col-md-3">
				<div class="vuzz-pricing">
					<div class="vuzz-pricing-header">
						<h5>Diamond</h5>
						<div class="vuzz-pricing-cost">
							 $29.99
						</div>
						<div class="vuzz-pricing-per">
							 per month
						</div>
					</div>
					<div class="vuzz-pricing-content">
						<ul>
							<li>5 products</li>
							<li>1 image per product</li>
							<li>basic stats</li>
							<li>non commercial</li>
						</ul>
					</div>
					<div class="vuzz-pricing-button">
						<a href="#" class="vuzz-button buttonprice" target="_self" rel="nofollow"><span class="vuzz-button-inner">Order now</span></a>
					</div>
				</div>
			</div>
		</div>
		<!-- END Pricing -->
		<div class="break">
		</div>
		
		
		
		
		<div class="row">
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Left Image
					</div>
				</div>
				<!-- Left Image
			================================================== -->
				<p>
					<img src="img/demo/300x200.png" class="pull-left paddingright" style="height:100px;width:150px;" alt=""> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla libero condimentum ligula tempus dapibus. Nulla interdum ante quis nisi dignissim sed tempus libero fermentum. In hac habitasse platea dictumst. Sed non arcu luctus quam accumsan iaculis. Integer molestie, massa eu lacinia rhoncus, elit ligula egestas mi, et aliquam turpis neque at dolor. Cras luctus orci vitae felis ultricies molestie.
				</p>
				<!-- END Left Image -->
			</div>
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Right Image
					</div>
				</div>
				<!-- Right Image
			================================================== -->
				<p>
					<img src="img/demo/300x200.png" class="pull-right paddingleft" style="height:100px;width:150px;" alt=""> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla libero condimentum ligula tempus dapibus. Nulla interdum ante quis nisi dignissim sed tempus libero fermentum. In hac habitasse platea dictumst. Sed non arcu luctus quam accumsan iaculis. Integer molestie, massa eu lacinia rhoncus, elit ligula egestas mi, et aliquam turpis neque at dolor. Cras luctus orci vitae felis ultricies molestie.
				</p>
				<!-- END Right Image -->
			</div>
		</div>
		<div class="break">
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Block Buttons
					</div>
				</div>
				<!-- Buttons
			================================================== -->
				<p>
					<a class="btn btn-warning btn-block" href="#">
					<i class="icon-repeat"></i> Reload</a>
					<a class="btn btn-success btn-block" href="#">
					<i class="icon-shopping-cart icon-large"></i> Checkout</a>
				</p>
				<p>
					<a class="btn btn-large btn-primary btn-block" href="#">
					<i class="icon-comment"></i> Comment</a>
					<a class="btn btn-small btn-info btn-block" href="#">
					<i class="icon-info-sign"></i> Info</a>
				</p>
				<p>
					<a class="btn btn-danger btn-block" href="#">
					<i class="icon-trash icon-large"></i> Delete</a>
				</p>

				<p>
					<a class="btn btn-primary btn-block" href="#">
					<i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
				</p>
			</div>
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Inline Buttons
					</div>
				</div>				
							<button type="button" class="btn btn-default btn-round">Submit</button>
							<button type="button" class="btn btn-primary btn-round">Submit</button>
							<button type="button" class="btn btn-success btn-round">Submit</button>
							<button type="button" class="btn btn-info btn-round">Submit</button>
							<button type="button" class="btn btn-warning btn-round">Submit</button><br/><br/>
							<button type="button" class="btn btn-danger btn-round">Submit</button>
						
				</div>
		</div>
		<div class="break">
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Image Styles
					</div>
				</div>
				<!-- Image Styles
			================================================== -->
				<img src="img/demo/300x200.png" width="120" height="120" class="img-rounded" alt=""> &nbsp; <img src="img/demo/300x200.png" width="150" height="150" class="img-circle" style="width:150px;height:150px;" alt=""> &nbsp; <img src="img/demo/300x200.png" width="150" height="150" class="img-polaroid" alt=""> &nbsp; 
				<!-- END Image Styles -->
			</div>
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Toggles
					</div>
				</div>
				<!-- Toggles
			================================================== -->
				<dl class="faqs" style="border:0px;">
					<dt class="">Donec pede justo, fringilla vel, aliquet nec?</dt>
					<dd style="display: none;">Nam eget dui. Etiam rhoncus. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. </dd>
					<dt class="hover">In enim justo, rhoncus ut, imperdiet a, venenatis?</dt>
					<dd style="display: none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</dd>
					<dt class="">Nam eget dui. Etiam rhoncus. Donec pede ?</dt>
					<dd style="display: none;">Nam eget dui. Etiam rhoncus. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. </dd>
				</dl>
				<!--END Toggles -->
			</div>
		</div>
		<div class="break">
		</div>
		
		<div class="row">
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Pagination
					</div>
				</div>
				<!-- Pagination
			================================================== -->
			<nav>
			  <ul class="pagination">
				<li>
				  <a href="#" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span>
				  </a>
				</li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li>
				  <a href="#" aria-label="Next">
					<span aria-hidden="true">&raquo;</span>
				  </a>
				</li>
			  </ul>
			</nav>

			
			<nav>
				  <ul class="pagination">
					<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
					<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
				 </ul>
			</nav>

			<nav>
			  <ul class="pagination pagination-lg">
				<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
			  </ul>
			</nav>
				<!-- END Pagination -->
			</div>
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Breadcrumbs
					</div>
				</div>
				<!-- Breadcrumbs
			================================================== -->
				<ol class="breadcrumb">
				  <li><a href="#">Home</a></li>
				</ol>
				
				<ol class="breadcrumb">
				  <li><a href="#">Home</a></li>
				  <li><a href="#">Library</a></li>
				</ol>
				
				<ol class="breadcrumb">
				  <li><a href="#">Home</a></li>
				  <li><a href="#">Library</a></li>
				  <li class="active">Data</li>
				</ol>
				<!-- END Breadcrumbs -->
			</div>
		</div>
		<div class="break">
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Accordion Alt
					</div>
				</div>
				<div class="bordered">
				</div>
				<!-- Accordion 
			================================================== -->
				<div class="accordion">
					<h3><span>Quis dolor id nunc</span></h3>
					<div class="accord_cont">
						<p>
							 Nunc sit amet velit metus. At leo tincidunt felis facilisis tincidunt. Proin posuere, ligula nec porttitor eget luctus, risus lectus tristique ligula, quis pretium elit diam a nisi eget mauris vestibulum. Proin vehicula malesuada dolor, vel rutrum. quam sollicitu hasellus turpis justo, sagittis sit amet elementum eget, ultricies ac tortor. Ut est mi, consequat ut bibendum quis, vehicula vel nibh. In urna tortor, pulvinar ut.
						</p>
					</div>
					<h3><span>Mauris suspendisse laoreet imperdiet</span></h3>
					<div class="accord_cont">
						<p>
							 At leo tincidunt felis facilisis tincidunt. Nunc sit amet velit metus. Proin posuere, ligula nec porttitor eget luctus, risus lectus tristique ligula, quis pretium elit diam a nisi eget mauris vestibulum. Proin vehicula malesuada dolor, vel rutrum. quam sollicitu hasellus turpis justo, sagittis sit amet elementum eget, ultricies ac tortor. Ut est mi, consequat ut bibendum quis, vehicula vel nibh. In urna tortor, pulvinar ut.
						</p>
					</div>
					<h3><span>Quis porttitor semper mauris!</span></h3>
					<div class="accord_cont">
						<p>
							 At leo tincidunt felis facilisis tincidunt. Nunc sit amet velit metus. Proin posuere, ligula nec porttitor eget luctus, risus lectus tristique ligula, quis pretium elit diam a nisi eget mauris vestibulum. Proin vehicula malesuada dolor, vel rutrum. quam sollicitu hasellus turpis justo, sagittis sit amet elementum eget, ultricies ac tortor. Ut est mi, consequat ut bibendum quis, vehicula vel nibh. In urna tortor.
						</p>
					</div>
					<h3><span>Eros odio ornare commodo</span></h3>
					<div class="accord_cont">
						<p>
							 Ut est mi, consequat ut bibendum quis, vehicula vel nibh. At leo tincidunt felis facilisis tincidunt. Nunc sit amet velit metus. Proin posuere, ligula nec porttitor eget luctus, risus lectus tristique ligula, quis pretium elit diam a nisi eget mauris vestibulum. Proin vehicula malesuada dolor, vel rutrum. quam sollicitu hasellus turpis justo, sagittis sit amet elementum eget, ultricies ac tortor.
						</p>
					</div>
				</div>
				<!-- END Accordion -->
			</div>
			<div class="col-md-6">
				<div class="titleborder">
					<div>
						 Slider
					</div>
				</div>
				<!-- Slider
			================================================== -->
				<div class="flexslider">
					<ul class="slides">
						<li>
						<img src="img/demo/r1.jpg" alt="">
						</li>
						<li>
						<img src="img/demo/r2.jpg" alt="">
						</li>
					</ul>
				</div>
				<!-- END Slider -->
			</div>
		</div>
		<div class="break">
		</div>
		
		<div class="row">
			<div class="titleborder">
				<div>
					 Fancy Boxes
				</div>
			</div>
		</div>
		<!-- Fancy Boxes
			================================================== -->
		<div class="row">
			<div class="col-md-3">
				<a href="#">
				<div class="service-box featured">
					<h3>Wireless</h3>
					<div class="circleicon">
						<i class="icon-signal"></i>
					</div>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuad.
					</p>
				</div>
				</a>
			</div>
			<div class="col-md-3">
				<a href="#">
				<div class="service-box black">
					<h3>I-Phone App</h3>
					<div class="circleicon">
						<i class="icon-phone"></i>
					</div>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuad.
					</p>
				</div>
				</a>
			</div>
			<div class="col-md-3">
				<a href="#">
				<div class="service-box black">
					<h3>Echo Technology</h3>
					<div class="circleicon">
						<i class="icon-leaf"></i>
					</div>
					<p>
						 Tristique senectus et netus et malesuada fames ac turpis egestas.
					</p>
				</div>
				</a>
			</div>
			<div class="col-md-3">
				<a href="#">
				<div class="service-box featured">
					<h3>Custom Products</h3>
					<div class="circleicon">
						<i class="icon-beaker"></i>
					</div>
					<p>
						 Premium HTML5 &amp; CSS3 template for multipurpose use. 
					</p>
				</div>
				</a>
			</div>
		</div>
		<!-- END Fancy Boxes-->
		<div class="break">
		</div>
		<div class="titleborder">
			<div>
				 Panels
			</div>
		</div>
		<!-- Panels
			================================================== -->
		<div class="row">
			<div class="col-md-12">
				<div class="panel">
					 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus.<br>
				</div>
			</div>
			<div class="clearfix">
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="panel1">
					 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus.<br>
				</div>
			</div>
			<div class="clearfix">
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="well well-large well-transparent clearfix">
					<i class="icon-flag icon-4x pull-left icon-border"></i>
					Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities. Pellentesque habitant morbi tristique senectus et netus et malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel port.
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12">
				<div class="info-box shadow-large bottom0">
					<div class="info-box-inner">
						<div class="info-content">
							<h4>Download Biscaya today, great looking modern theme!</h4>
							<p>
								Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Fusce suscipit.
							</p>
						</div>
						<a style="float: right;" class="btn btn-warning btn-large" href="#"><i class="icon-th"></i> Call to action button</a>
						<div class="clearfix">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /END Panels -->
		<div class="break">
		</div>
		<div class="titleborder">
			<div>
				 Colorful Boxes
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<div class="boxolive" style="text-align:center;">
					 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
				</div>
			</div>
			<div class="col-md-4">
				<div class="boxblue" style="text-align:center;">
					 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
				</div>
			</div>
			<div class="col-md-4">
				<div class="boxgreen" style="text-align:center;">
					 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<div class="boxred" style="text-align:center;">
					 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
				</div>
			</div>
			<div class="col-md-4">
				<div class="boxgray" style="text-align:center;">
					 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
				</div>
			</div>
			<div class="col-md-4">
				<div class="boxyellow" style="text-align:center;">
					 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
				</div>
			</div>
		</div>
		<div class="break">
		</div>
		<section id="effects">
		<div class="titleborder">
			<div>
				 Box Shadow Effects
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="box effect1">
					<h3>Effect 1</h3>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla.
					</p>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box effect2">
					<h3>Effect 2</h3>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla.
					</p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="box effect3">
					<h3>Effect 3</h3>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla.
					</p>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box effect4">
					<h3>Effect 4</h3>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla.
					</p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="box effect5">
					<h3>Effect 5</h3>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla.
					</p>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box effect6">
					<h3>Effect 6</h3>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla.
					</p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="box effect7">
					<h3>Effect 7</h3>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla.
					</p>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box effect8">
					<h3>Effect 8</h3>
					<p>
						 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt, felis vel varius tristique, dui nisi mollis massa, vel porta elit libero ullamcorper lacus. Donec fringilla.
					</p>
				</div>
			</div>
		</div>
		</section>
		<div class="break">
		</div>
		<div class="titleborder">
			<div>
				 Tables
			</div>
		</div>
		<table class="table table-bordered">
		<thead>
		<tr>
			<th>
				 #
			</th>
			<th>
				 First Name
			</th>
			<th>
				 Last Name
			</th>
			<th>
				 Username
			</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td rowspan="2">
				 1
			</td>
			<td>
				 Mark
			</td>
			<td>
				 Otto
			</td>
			<td>
				 @mdo
			</td>
		</tr>
		<tr>
			<td>
				 Mark
			</td>
			<td>
				 Otto
			</td>
			<td>
				 @TwBootstrap
			</td>
		</tr>
		<tr>
			<td>
				 2
			</td>
			<td>
				 Jacob
			</td>
			<td>
				 Thornton
			</td>
			<td>
				 @fat
			</td>
		</tr>
		<tr>
			<td>
				 3
			</td>
			<td colspan="2">
				 Larry the Bird
			</td>
			<td>
				 @twitter
			</td>
		</tr>
		</tbody>
		</table>
		<div class="break">
		</div>
		<!-- Carousel List
	================================================== -->
		<div class="titleborder">
			<div>
				 Carousel List
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="list_carousel" style="height:230px;">
					<div class="carousel_nav">
						<a class="prev" id="car_prev" href="#"><span>prev</span></a>
						<a class="next" id="car_next" href="#"><span>next</span></a>
					</div>
					<div class="clearfix">
					</div>
					<div class="heightauto">
						<ul id="recent-projects" class="heightauto">
							<!--featured-projects 1-->
							<li>
							<div class="featured-projects">
								<div class="featured-projects-image">
									<a href="#"><img src="img/demo/300x200.png" class="imgOpa" alt=""></a>
								</div>
								<div class="featured-projects-content">
									<h1><a href="#">Dolor sit amet</a></h1>
									<p>
										 porta acean pulvinar
									</p>
								</div>
							</div>
							</li>
							<!--featured-projects 2-->
							<li>
							<div class="featured-projects">
								<div class="featured-projects-image">
									<a href="#"><img src="img/demo/300x200.png" class="imgOpa" alt=""></a>
								</div>
								<div class="featured-projects-content">
									<h1><a href="#">Nunc elementum </a></h1>
									<p>
										 porta acean pulvinar
									</p>
								</div>
							</div>
							</li>
							<!--featured-projects 3-->
							<li>
							<div class="featured-projects">
								<div class="featured-projects-image">
									<a href="#"><img src="img/demo/300x200.png" class="imgOpa" alt=""></a>
								</div>
								<div class="featured-projects-content">
									<h1><a href="#">Sit amet</a></h1>
									<p>
										 porta acean pulvinar
									</p>
								</div>
							</div>
							</li>
							<!--featured-projects 4-->
							<li>
							<div class="featured-projects">
								<div class="featured-projects-image">
									<a href="#"><img src="img/demo/300x200.png" class="imgOpa" alt=""></a>
								</div>
								<div class="featured-projects-content">
									<h1><a href="#">Dapibus facilisis</a></h1>
									<p>
										 porta acean pulvinar
									</p>
								</div>
							</div>
							</li>
							<!--featured-projects 5-->
							<li>
							<div class="featured-projects">
								<div class="featured-projects-image">
									<a href="#"><img src="img/demo/300x200.png" class="imgOpa" alt=""></a>
								</div>
								<div class="featured-projects-content">
									<h1><a href="#">Nunc elementum</a></h1>
									<p>
										 porta acean pulvinar
									</p>
								</div>
							</div>
							</li>
							<!--featured-projects 6-->
							<li>
							<div class="featured-projects">
								<div class="featured-projects-image">
									<a href="#"><img src="img/demo/300x200.png" class="imgOpa" alt=""></a>
								</div>
								<div class="featured-projects-content">
									<h1><a href="#">Dolor sit amet</a></h1>
									<p>
										 porta acean pulvinar
									</p>
								</div>
							</div>
							</li>
							<!--featured-projects 7-->
							<li>
							<div class="featured-projects">
								<div class="featured-projects-image">
									<a href="#"><img src="img/demo/300x200.png" class="imgOpa" alt=""></a>
								</div>
								<div class="featured-projects-content">
									<h1><a href="#">HTML Theme</a></h1>
									<p>
										 porta acean pulvinar
									</p>
								</div>
							</div>
							</li>
							<!--featured-projects 8-->
							<li>
							<div class="featured-projects">
								<div class="featured-projects-image">
									<a href="#"><img src="img/demo/300x200.png" class="imgOpa" alt=""></a>
								</div>
								<div class="featured-projects-content">
									<h1><a href="#">Salique bedroom</a></h1>
									<p>
										 porta acean pulvinar
									</p>
								</div>
							</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- END Carousel List -->
	</div>
	<!-- FOOTER BEGIN
================================================== -->
	<div class="footer footerdark">
		<div class="text-center wraptotop">
			<a class="totop"><i class="icon-chevron-up"></i></a>
		</div>
		<div class="container">
			<!-- 1st row -->
			<div class="row">
				<div class="col-md-4">
					<h1 class="title"><i class="icon-heart"></i> About us</h1>
					<hr>
					<p>
						 Introducing a premium HTML5 & CSS3 template for multipurpose use. Responsive layout, professional design & lots of features.
					</p>
					<p>
						 Made with love by  WowThemesNet .
					</p>
					<p class="footerlogo">
						 Biscaya
					</p>
				</div>
				<div class="col-md-4">
					<h1 class="title">Testimonials</h1>
					<hr>
					<div id="quotes">
						<div class="textItem">
							<div class="avatar">
								<img src="img/demo/test1.png" alt="avatar">
							</div>
							 "Before turning to those moral and mental aspects of the matter which present the greatest difficulties, let the inquirer begin by mastering more elementary problems.<span style="font-family:arial;">"</span><br/><b> Jesse T, Los Angeles </b>
						</div>
						<div class="textItem">
							<div class="avatar">
								<img src="img/demo/test2.gif" alt="avatar">
							</div>
							 "How often have I said to you that when you have eliminated the impossible, whatever remains, however improbable, must be the truth?<span style="font-family:arial;">"</span><br/><b>Ralph G. Flowers </b>
						</div>
						<div class="textItem">
							<div class="avatar">
								<img src="img/demo/test1.png" alt="avatar">
							</div>
							 "It is a capital mistake to theorize before one has data. Insensibly one begins to twist facts to suit theories, instead of theories to suit facts.<span style="font-family:arial;">"</span><br/><b>Kerry I. McClanahan </b>
						</div>
						<div class="textItem">
							<div class="avatar">
								<img src="img/demo/test2.gif" alt="avatar">
							</div>
							 "We must fall back upon the old axiom that when all other contingencies fail, whatever remains, however improbable, must be the truth.<span style="font-family:arial;">"</span><br/><b>Randy K. Deleon </b>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<h1 class="title">Questions?</h1>
					<hr>
					<div class="done">
						<div class="alert alert-success">
							<button type="button" class="close" data-dismiss="alert">×</button>
							Your message has been sent. Thank you!
						</div>
					</div>
					<form method="post" action="contact.php" id="contactform">
						<div class="form">
							<div class="controls controls-row">
								<input class="col-md-6" type="text" name="name" placeholder="Name">
								<input class="col-md-6" type="text" name="email" placeholder="E-mail">
							</div>
							<div class="controls">
								<textarea class="col-md-12" name="comment" rows="4" placeholder="Message"></textarea>
							</div>
							<input type="submit" id="submit" class="btn" value="Send">
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- 2nd row -->
	<div class="footerbottom footerbottomdark">
		<div class="container">
			<div class="row">
				<!-- left -->
				<div class="col-md-4 smallspacetop">
					<p class="smaller">
						<span class="copyright">© </span> Copyright 2016 Biscaya. Be nice.
					</p>
				</div>
				<!-- right -->
				<div class="col-md-8 smallspacetop">
					<div class="pull-right smaller">
						<ul class="footermenu">
							<li><a href="#">Home</a></li>
							<li><a href="#">Work</a></li>
							<li><a href="#">Pages</a></li>
							<li><a href="#">Blog</a></li>
							<li><a href="#">Contact</a></li>
						</ul>
					</div>
					<div class="clearfix">
					</div>
				</div>
				<!-- end right -->
			</div>
		</div>
	</div>
	<!-- FOOTER END
================================================== -->
</div>
<!-- /.body -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquerylatest.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins.js"></script>
<script src="js/custom.js"></script>

<!--BEGIN DEMO PANEL

================================================== -->

<!-- Style Switcher Files-->

<link rel="stylesheet" href="css/style-switcher.css" media="screen"/>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.min.css" media="screen"/>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript" src="js/styleswitch.js"></script>

<script type="text/javascript" src="js/switcher.js"></script>

<!-- DEMO PANEL -->

<div id="switcher-handle">

	<a class="" id="handle" href="#">feedback</a>

	<div id="style-switcher">

		<div id="switcher-header">

			<p>

				Theme Options

			</p>

		</div>

		<div id="switcher-body">

			<p>

				<strong>Layout Style</strong>

			</p>

		<select id="layout">		   

		  <option value="boxed">Boxed</option>

		  <option value="wide">Wide</option>		  

		</select>

		

			<p>

				<strong>Color Schemes</strong>

			</p>

			

			<div class="colors-holder">

				<a href="#" class="color-box" data-rel="e7402f"></a>

				<a href="#" class="color-box" data-rel="0E8FAB"></a>				

				<a href="#" class="color-box" data-rel="44cfc8"></a>				

				<a href="#" class="color-box" data-rel="9DC500"></a>				

				<a href="#" class="color-box" data-rel="76719a"></a>				

				<a href="#" class="color-box" data-rel="f2a020"></a>

				<a href="#" class="color-box" data-rel="33bee5"></a>				

				<a href="#" class="color-box" data-rel="e44884"></a>

				<a href="#" class="color-box" data-rel="18adb5"></a>				

				<a href="#" class="color-box" data-rel="f0b70c"></a>

				

				<a href="#" class="color-box" data-rel="346b7f"></a>

				<a href="#" class="color-box" data-rel="aecdcf"></a>

				<a href="#" class="color-box" data-rel="be9869"></a>

				<a href="#" class="color-box" data-rel="bf6c2f"></a>				

				<a href="#" class="color-box" data-rel="1abc9c"></a>				

				<a href="#" class="color-box" data-rel="7f8c8d"></a>				

				<a href="#" class="color-box" data-rel="b4ad7f"></a>				

				<a href="#" class="color-box" data-rel="fe6c6c"></a>				

				<a href="#" class="color-box" data-rel="e66a47"></a>

				<a href="#" class="color-box" data-rel="50e9f3"></a>

			</div>

			<div class="switcher-divider">

			</div>

			

			<p>

				<strong>Bg Patterns (for boxed)</strong>

			</p>

			<div class="colors-holder">

				<a data-rel="1" class="bg-box" href="#"></a>

				<a data-rel="2" class="bg-box" href="#"></a>

				<a data-rel="3" class="bg-box" href="#"></a>

				<a data-rel="4" class="bg-box" href="#"></a>

				<a data-rel="5" class="bg-box" href="#"></a>

				<a data-rel="6" class="bg-box" href="#"></a>

				<a data-rel="7" class="bg-box" href="#"></a>

				<a data-rel="8" class="bg-box" href="#"></a>

				<a data-rel="9" class="bg-box" href="#"></a>

				<a data-rel="10" class="bg-box" href="#"></a>

				<a data-rel="11" class="bg-box" href="#"></a>

				<a data-rel="12" class="bg-box" href="#"></a>

				<a data-rel="13" class="bg-box" href="#"></a>

				<a data-rel="14" class="bg-box" href="#"></a>

				<a data-rel="15" class="bg-box" href="#"></a>

				<a data-rel="16" class="bg-box" href="#"></a>

				<a data-rel="17" class="bg-box" href="#"></a>

				<a data-rel="18" class="bg-box" href="#"></a>

				<a data-rel="19" class="bg-box" href="#"></a>

				<a data-rel="20" class="bg-box" href="#"></a>

				<a data-rel="21" class="bg-box" href="#"></a>

				<a data-rel="22" class="bg-box" href="#"></a>

				<a data-rel="23" class="bg-box" href="#"></a>

				<a data-rel="24" class="bg-box" href="#"></a>

			</div>

		

		

		<div class="switcher-divider">

			</div>

			

			<p>

				<strong>Bg Images (for boxed)</strong>

			</p>

			<div class="colors-holder">

			<a data-rel="pic1" class="bgimg-box" href="#"></a>

			<a data-rel="pic2" class="bgimg-box" href="#"></a>

			<a data-rel="pic3" class="bgimg-box" href="#"></a>

			<a data-rel="pic4" class="bgimg-box" href="#"></a>

			<a data-rel="pic5" class="bgimg-box" href="#"></a>

			<a data-rel="pic6" class="bgimg-box" href="#"></a>

			<a data-rel="pic7" class="bgimg-box" href="#"></a>

			<a data-rel="pic8" class="bgimg-box" href="#"></a>

			<br/><br/>

			</div>

			

		</div>	

			

		<div id="switcher-footer">

			<p>

				<a href="http://www.upare.com/" target="_blank"><img src="https://static.upare.com/upare/img/logowowthemes.png"></a>



			</p>

		</div>

	</div>

</div>

<!-- END DEMO PANEL-->
<!-- CALL FLEX SLIDER -->
<script type="text/javascript">
	  $(window).load(function() {
		$('.flexslider').flexslider({
		pauseOnHover: false,    
		slideshow: true,                //Boolean: Animate slider automatically
		slideshowSpeed: 4000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
		animationSpeed: 1300,
		animation: "slide",              //String: Select your animation type, "fade" or "slide"
		easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
		direction: "horizontal",
		controlNav: false,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
		directionNav: true
		});
	  });
	</script>
<!-- CALL CAROUSEL LIST -->
<script type="text/javascript">
	$(window).load(function(){			
				$('#recent-projects').carouFredSel({
					responsive: true,
					width: '100%',
					auto: true,
					circular	: true,
					infinite	: false,
					prev : {
						button		: "#car_prev",
						key			: "left",
							},
					next : {
						button		: "#car_next",
						key			: "right",
								},
					swipe: {
						onMouse: true,
						onTouch: true
						},
					scroll : 1500,
					items: {
						visible: {
							min: 4,
							max: 4
						}
					}
				});
			});	
	</script>
<!-- CALL FAQS -->
<script type="text/javascript"> 
  $(document).ready(function () {
	   // ---- FAQs ---------------------------------------------------------------------------------------------------------------
		$('.faqs dd').hide(); // Hide all DDs inside .faqs
		$('.faqs dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){ // Add class "hover" on dt when hover
		$(this).next().slideToggle('normal'); // Toggle dd when the respective dt is clicked
		}); 
});
</script>
<!-- Call opacity on hover images from carousel-->
<script type="text/javascript">
$(document).ready(function(){
    $("img.imgOpa").hover(function() {
      $(this).stop().animate({opacity: "0.6"}, 'slow');
    },
    function() {
      $(this).stop().animate({opacity: "1.0"}, 'slow');
    });
  });
</script>
<!-- CALL ACCORDION -->
<script>
	$(".accordion h3").eq(0).addClass("active");
	$(".accordion .accord_cont").eq(0).show();
	$(".accordion h3").click(function(){
		$(this).next(".accord_cont").slideToggle("slow")
		.siblings(".accord_cont:visible").slideUp("slow");
		$(this).toggleClass("active");
		$(this).siblings("h3").removeClass("active");
	});	
</script>
</body>
</html>